<script setup>
import { ref, getCurrentInstance, reactive, computed, nextTick } from "vue";
import { useRouter } from "vue-router";

import moment from "moment";
import { Search, Refresh } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import api from "@/api";

import dqjdIcon from "@/assets/images/project/dqjd.png";
import jcIcon from "@/assets/images/project/jc.png";
import lbtIcon from "@/assets/images/project/lbt.png";
import wlmIcon from "@/assets/images/project/wlm.png";
import { unset } from "lodash";
import LivePlayer from "@liveqing/liveplayer-v3";

const { proxy } = getCurrentInstance();

const router = useRouter();

const progress = reactive({
  projectTime: [],
  currentStage: "",
  tabs: [
    {
      name: "基坑阶段",
      icon: jcIcon,
      value: "角撑",
      time: "",
      state: "",
      cls: "",
    },
    {
      name: "楼本体阶段",
      icon: lbtIcon,
      value: "--",
      time: "",
      state: "",
      cls: "",
    },
    {
      name: "外立面阶段",
      icon: wlmIcon,
      value: "--",
      time: "",
      state: "",
      cls: "",
    },
  ],
  active: -1,
  total: 0,
  form: {
    info: "all",
    startTime: "",
    endTime: "",
    times: "",
    level: "",
    stype: [],
    etype: "0",
  },
  builds: [],
  imgUrls: [""],
  dialogVisible: false,
  activeBuild: "",
  projectPhase: "",
  rVideoUrl: "",
  rImgUrl: [],
  statisticUrl: "",
  floorImgUrls: [],
  loading: false,
  ltxzOpts: [],
  facadeCheck: true,
  previewList: [],
  previewShow: false,
});

const localOpts = [
  {
    label: "全部",
    value: "all",
  },
  {
    label: "基坑",
    value: "foundationPit",
    children: [
      {
        label: "钢筋",
        value: "rebar",
      },
      {
        label: "角撑",
        value: "brace",
      },
      {
        label: "模版",
        value: "template",
      },
      {
        label: "已完成",
        value: "finish",
      },
    ],
  },
  {
    label: "楼本体",
    value: "buildingProgress",
  },
  {
    label: "外立面",
    value: "buildingFacade",
  },
];

// const gqjdOpts = [
//   {
//     label: "全部",
//     value: "0",
//   },
// ];

const jkOpts = [
  {
    label: "全部",
    value: "",
  },
];

const legend = [
  {
    name: "已完成",
    color: "#18D48B",
  },
  {
    name: "逾期",
    color: "#FED738",
  },
  {
    name: "严重逾期",
    color: "#F55117",
  },
  {
    name: "未完成",
    color: "#D5D9DF",
  },
];

//获取进度模块数据

const keyMapState = {
  foundationPit: {
    rebar: "钢筋",
    brace: "角撑",
    template: "模版",
    finish: "已完成",
  },
  other: {
    pending: "未开始",
    progressing: "进行中",
    finish: "已完成",
  },
};

const keyMapStage = {
  foundationPit: "基坑阶段",
  buildingProgress: "楼本体阶段",
  buildingFacade: "外立面阶段",
};

const getStage = computed(() => (item) => {
  return item === "foundationPit"
    ? "基坑阶段"
    : item === "buildingProgress"
      ? "楼本体阶段"
      : item === "buildingFacade"
        ? "外立面阶段"
        : "--";
});

//获取模块数据
const getProcessData = function (flag) {
  progress.loading = true;
  api.progress
    .getCurrentProgressInfo({
      startDate: progress.startTime,
      endDate: progress.endTime,
    })
    .then((res) => {
      if (res) {
        progress.loading = false;

        //当前阶段
        const projectSTime =
          res.data.startTime === "NA" || !res.data.startTime
            ? "--"
            : res.data.startTime.split("T")[0];

        const projectETime =
          res.data.endTime === "NA" || !res.data.endTime
            ? "--"
            : res.data.endTime.split("T")[0];

        progress.statisticUrl = res.statisticUrl;
        progress.projectPhase = res.data.projectPhase;
        progress.currentStage = keyMapStage[res.data.projectPhase];
        progress.projectTime = [projectSTime, projectETime];

        //阶段总览
        res.data.overView.forEach((item) => {
          const startTime =
            item.startTime === "NA" || !item.startTime
              ? ""
              : item.startTime.split("T")[0];

          const endTime =
            item.endTime === "NA" || !item.endTime
              ? ""
              : item.endTime.split("T")[0];

          if (item.projectPhase === "foundationPit") {
            progress.tabs[0].time =  " ~ ";
            progress.tabs[0].state = keyMapState.foundationPit[item.state];
            progress.tabs[0].cls = item.state;
          } else if (item.projectPhase === "buildingProgress") {
            progress.tabs[1].time =  " ~ ";
            progress.tabs[1].state = "已完成";
            progress.tabs[1].cls = "finish";
          } else if (item.projectPhase === "buildingFacade") {
            progress.tabs[2].time =  " ~ ";
            progress.tabs[2].state = "";
            progress.tabs[2].cls = item.state;
          }
        });

        //如果是初始化获取所有数据，将楼体信息存储
        if (flag === "init") {
          res.data.buildingInfos.forEach((item) => {
            progress.ltxzOpts.push({
              label: item.alias,
              value: item.deviceId,
            });
          });
        }

        //条件筛选楼栋

        //楼体选择 (不选可展示全部)
        if (progress.form.stype.length > 0) {
          res.data.buildingInfos = res.data.buildingInfos.filter((item) => {
            return progress.form.stype.includes(item.deviceId);
          });
        }

        //当前阶段
        if (progress.form.info !== "all") {
          res.data.buildingInfos = res.data.buildingInfos.filter((item) => {
            return progress.form.info === item.currentStage;
          });
        }

        //楼栋列表
        progress.builds = res.data.buildingInfos;
        progress.total = res.data.buildingInfos.length;

        //如果数据为空
        if (res.data.buildingInfos.length === 0) {
          progress.rVideoUrl = "";
          progress.rImgUrl = [];
          return;
        }

        //右侧默认展示第一栋楼数据
        sItemrHandleClick(res.data.buildingInfos[0], 0);
      }
    });
};

getProcessData("init");

const erightHandleClick = function (flag) {
  progress.resType = flag;
};

const thumbHandleClick = function (item) {
  progress.dialogShow = true;
  progress.activeVideoUrl = item.url;
};

//获取每层的开始，结束事件
//设置每层楼高度
const getFloorTime = computed(() => (item, index) => {
  const floor = item.buildingProgressInfo.detail[index - 1];
  const startTime =
    floor.startTime === "NA" ? "" : floor.startTime.split("T")[0];
  const endTime = floor.endTime === "NA" ? "" : floor.endTime.split("T")[0];
  const actualStartTime =
    floor.actualStartTime === "NA" ? "" : floor.actualStartTime.split("T")[0];
  const actualEndTime =
    floor.actualEndTime === "NA" ? "" : floor.actualEndTime.split("T")[0];
  return {
    startTime,
    endTime,
    actualStartTime,
    actualEndTime,
  };
});

//将数字转换为数组
const getArrfromNum = function (num) {
  let arr = [];
  for (let i = 1, l = num; i <= l; i++) {
    arr.push(i);
  }
  return arr;
};

//设置每层楼高度
const getFloorHei = computed(() => (item) => {
  return {
    height: 213 / item.buildingProgressInfo.totalFloor + "px",
  };
});

const getFloorNumHei = computed(() => (item) => {
  return {
    transform: `scale(${Math.min(
      10 / item.buildingProgressInfo.totalFloor,
      1.4
    )})`,
  };
});

//通过楼栋信息设置class
const getFloorCls = computed(() => (item, index) => {
  //倒序
  const reverse = item.buildingProgressInfo.totalFloor - index + 1;
  if (item.buildingProgressInfo.totalFloor == reverse && getArrfromNum(item.buildingProgressInfo.floorFinish).includes(reverse)) {
    return "f-done"
  }
  //严重逾期
  if (item.buildingProgressInfo.floorseriouslyOverdue.includes(reverse)) {
    return "f-seriousOverdue";
  }

  //逾期
  if (item.buildingProgressInfo.floorOverdue.includes(reverse)) {
    return "f-overdue";
  }

  //已完成
  if (getArrfromNum(item.buildingProgressInfo.floorFinish).includes(reverse)) {
    return "f-done";
  }

  //未完成
  else {
    return "f-unbuilt";
  }
});

//鼠标放上放大
const floorMouseOverHandle = function (event, item) {
  //当楼层小于10层的时候，不进行放大展示
  if (item.buildingProgressInfo.totalFloor < 10) return;

  event.currentTarget.style.transform = `scale(${item.buildingProgressInfo.totalFloor / 7
    })`;
  event.currentTarget.style.transformOrigin = "left top";
};

//鼠标移开
const floorMouseLeaveHandle = function (event) {
  event.currentTarget.style.transform = "unset";
};

const floorClickHandle = function (item, index) {
  const floor = item.buildingProgressInfo.detail[index - 1];
  progress.activeBuild = `第${floor.floorNumber}层施工图`;
  progress.floorImgUrls = [
    progress.statisticUrl + floor.imgUrl.replace("_1.jpg", "_0.jpg"),
    progress.statisticUrl + floor.imgUrl.replace("_0.", "_1."),
  ];
  progress.dialogVisible = true;
};

const handleChange = function (item) {
  progress.form.info = item[item.length - 1];
};

const sItemrHandleClick = function (item, index) {
  progress.active = index;

  progress.rVideoUrl = item.liveStreamUrl;
  progress.rImgUrl = [];
  if (item.foundationPitInfo.imgUrl) {
    progress.rImgUrl.push(
      progress.statisticUrl + item.foundationPitInfo.imgUrl
    );
  }
  if (item.buildingProgressInfo.imgUrl) {
    progress.rImgUrl.push(
      progress.statisticUrl + item.buildingProgressInfo.imgUrl
    );
  }
  if (item.buildingFacadeInfo.imgUrl) {
    progress.rImgUrl.push(
      progress.statisticUrl + item.buildingFacadeInfo.imgUrl
    );
  }
};

const dateChangeHandleClick = function (date) {
  progress.startTime = moment(date[0]).format("YYYY-MM-DD");
  progress.endTime = moment(date[1]).format("YYYY-MM-DD");
};

const onSubmit = function () {
  getProcessData();
};

const onReset = function () {
  progress.form.times = "";
  progress.startTime = "";
  progress.endTime = "";
  progress.form.info = "all";
  progress.form.stype = [];
  getProcessData();
};

let _notifica = null;
const tabHandleClick = function (index) {
  if (index === 0) return;
  if (_notifica) {
    _notifica.close();
  }
  _notifica = ElNotification({
    title: "温馨提示",
    message: "请通过点击下方楼体进行查看!",
    type: "success",
    duration: 2000,
    customClass: "progressNotifica",
    showClose: false,
  });
};

const facadeHandleClick = function (item) {
  progress.activeBuild = item.alias + "算法图";
  progress.floorImgUrls = [
    progress.statisticUrl + item.buildingFacadeInfo.imgUrl,
  ];
  progress.dialogVisible = true;
};

const previewHandleClick = function (url) {
  progress.previewShow = true;
  nextTick(() => {
    document
      .querySelector(".el-image-viewer__canvas img")
      .setAttribute("crossorigin", "anonymous");
  });
  progress.previewList = [url];
};

const previewCloseHandle = function () {
  progress.previewShow = false;
  progress.previewList = [];
};
</script>

<template>
  <div class="container" v-loading="progress.loading">
    <div class="tabs">
      <div class="currentStage">
        <i></i>
        <div class="desc">
          <span class="desc-top">当前阶段: </span>
          <div class="desc-btm">
            <!-- <span> {{ progress.projectTime[0] }}</span> -->
            <!-- <span> {{ progress.projectTime[1] }}</span> -->
          </div>
          <div class="value">{{ progress.currentStage }}</div>
        </div>
      </div>
      <div class="tab-item" :class="item.cls" v-for="(item, index) in progress.tabs" :key="index"
        @click="tabHandleClick(index)">
        <img :src="item.icon" />
        <div class="desc">
          <span class="desc-top">{{ item.name }}</span>
          <span class="desc-btm">{{ item.time }}</span>
        </div>
        <div class="value">{{ item.state }}</div>
      </div>
    </div>

    <div class="toolbar">
      <el-form :model="progress.form" label-width="80px">
        <el-form-item label="起止时间">
          <el-date-picker size="small" v-model="progress.form.times" type="daterange" range-separator="一"
            start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChangeHandleClick" />
        </el-form-item>

        <el-form-item label="当前阶段">
          <el-cascader size="small" v-model="progress.form.info" placeholder="请选择" :options="localOpts"
            @change="handleChange" />
        </el-form-item>
        <!-- 
        <el-form-item label="工期进度">
          <el-select size="small" v-model="progress.form.etype" placeholder="请选择">
            <el-option v-for="item in gqjdOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="楼体选择">
          <el-select multiple collapse-tags collapse-tags-tooltip size="small" v-model="progress.form.stype"
            placeholder="请选择">
            <el-option v-for="item in progress.ltxzOpts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button :icon="Search" size="small" type="primary" @click="onSubmit" color="#8F93F7"
            style="color: #ffffff">搜索</el-button>
          <el-button color="#FFFFFF" :icon="Refresh" size="small" type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="event-num">
      <div class="e-left">
        <div class="total">
          <span>楼体总数：</span>
          <span class="value">{{ progress.total }}</span>
          <font>个</font>
        </div>
      </div>
    </div>
    <div v-if="progress.builds.length === 0" class="nodata">
      <el-alert title="暂无数据!" type="warning" show-icon :closable="false" />
    </div>
    <div class="build" v-else>
      <div class="build-l">
        <div class="legend">
          <div class="legend-item" v-for="(item, index) in legend" :key="index">
            <i :style="`background:${item.color}`"></i>
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="facadeCheck">
          <!-- <el-checkbox v-model="progress.facadeCheck" label="外立面可见" size="large" /> -->
        </div>
        <div class="sketch" :class="progress.projectPhase">
          <div class="sketch-item" v-for="(item, index) in progress.builds" :key="index">
            <i class="facade" v-if="item.currentStage === 'buildingFacade' && progress.facadeCheck
              " @click="facadeHandleClick(item)"></i>
            <div class="s-item-l">
              <div class="floorInfo" v-if="item.buildingProgressInfo">
                <div :style="getFloorHei(item)" :class="getFloorCls(item, buidIndex)" class="floor-item"
                  v-for="buidIndex of item.buildingProgressInfo.totalFloor" :key="buidIndex"
                  @mouseover="floorMouseOverHandle($event, item)" @mouseleave="floorMouseLeaveHandle($event)"
                  @click="floorClickHandle(item, buidIndex)">
                  <el-tooltip placement="right" effect="light" :show-after="100">
                    <template #content>
                      <div class="floorTip">
                        <div class="title">
                          第{{
                            item.buildingProgressInfo.totalFloor -
                            buidIndex +
                            1
                          }}层
                        </div>
                        <div class="tip1">
                          <span class="name">计划开始时间：</span>
                          <span class="value">{{
                            getFloorTime(item, buidIndex).startTime
                          }}</span>
                        </div>
                        <div class="tip2">
                          <span class="name">计划结束时间：</span>
                          <span class="value">{{
                            getFloorTime(item, buidIndex).endTime
                          }}</span>
                        </div>
                        <div class="tip3">
                          <span class="name">实际开始时间：</span>
                          <span class="value">{{
                            getFloorTime(item, buidIndex).actualStartTime
                          }}</span>
                        </div>
                        <div class="tip4">
                          <span class="name">实际结束时间：</span>
                          <span class="value">{{
                            getFloorTime(item, buidIndex).actualEndTime
                          }}</span>
                        </div>
                      </div>
                    </template>
                    <span :style="getFloorNumHei(item)">{{
                      item.buildingProgressInfo.totalFloor - buidIndex + 1
                    }}</span>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div class="s-item-r" @click="sItemrHandleClick(item, index)"
              :class="progress.active === index ? 'active' : ''">
              <div class="name">{{ item.alias }}</div>
              <div class="stage">
                <span class="label">当前阶段：</span>
                <span class="value">{{ getStage(item.currentStage) }}</span>
              </div>
              <div class="total">
                <span class="label">总楼层：</span>
                <span class="value">{{ item.buildingProgressInfo.totalFloor }}层</span>
              </div>
              <div class="done">
                <span class="label">已完成：</span>
                <span class="value">{{ item.buildingProgressInfo.floorFinish }}层</span>
              </div>
              <div class="unbuilt">
                <span class="label">未修筑：</span>
                <span class="value">{{
                  item.buildingProgressInfo.totalFloor -
                  item.buildingProgressInfo.floorFinish
                }}层</span>
              </div>
              <div class="overdue">
                <span class="label">逾期：</span>
                <el-tooltip class="box-item" effect="light" placement="top-start">
                  <template #content>
                    <span v-for="(child, index2) in item.buildingProgressInfo
                      .floorOverdue" :key="index2">{{ child }},</span>楼
                  </template>

                  <div class="value">
                    <span v-for="(child, index2) in item.buildingProgressInfo
                      .floorOverdue" :key="index2">{{ child }}楼<span v-if="index2 !==
    item.buildingProgressInfo.floorOverdue.length - 1
    ">,</span></span>
                  </div>
                </el-tooltip>
              </div>
              <div class="seriousOverdue">
                <span class="label">严重逾期：</span>
                <el-tooltip class="box-item" effect="light" placement="top-start">
                  <template #content>
                    <span v-for="(child, index2) in item.buildingProgressInfo
                      .floorseriouslyOverdue" :key="index2">{{ child }},</span>楼
                  </template>

                  <div class="value">
                    <span v-for="(child, index2) in item.buildingProgressInfo
                      .floorseriouslyOverdue" :key="index2">{{ child }}楼<span v-if="index2 !==
    item.buildingProgressInfo.floorseriouslyOverdue
      .length -
    1
    ">,</span></span>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="build-r">
        <div class="build-r-real">
          <div class="title">
            <span>视频</span>
          </div>
          <div class="videobox">
            <LivePlayer :videoUrl="progress.rVideoUrl" fluent aspect="fullscreen" autoplay live />
          </div>
        </div>
       
      </div> -->
    </div>
  </div>
  <el-dialog v-model="progress.dialogVisible" :width="700" :title="progress.activeBuild" :destroy-on-close="true">
    <el-carousel indicator-position="outside" :autoplay="false" trigger="click">
      <el-carousel-item v-for="(item, index) in progress.floorImgUrls" :key="index">
        <el-image crossorigin="anonymous" style="width: 100%; height: 265px" :src="item" fit="contain"
          @click="previewHandleClick(item)" />
      </el-carousel-item>
    </el-carousel>
  </el-dialog>

  <el-image-viewer :url-list="progress.previewList" :hide-on-click-modal="true" v-if="progress.previewShow"
    @close="previewCloseHandle" />
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  font-family: SourceHanSansSC;

  // :deep .el-loading-mask {
  //   background: #FFFFFF;
  // }

  .tabs {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    color: #ffffff;
    margin-top: 10px;

    .currentStage {
      width: 26%;
      height: 56px;
      color: #656565;
      display: flex;

      i {
        display: inline-block;
        width: 45px;
        height: 45px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/project/local.png");
        margin-top: 5px;
        margin-right: 10px;
      }

      .desc {
        width: 80%;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        box-sizing: border-box;
        align-items: center;

        .desc-top {
          display: block;
          font-weight: bold;
          color: #6e91fb;
          font-size: 18px;
        }

        .desc-btm {
          width: 100px;
          font-size: 12px;
          cursor: pointer;
          text-align: center;

          span {
            display: block;
          }
        }

        .value {
          font-size: 18px;
          font-weight: bold;
          color: #6e91fb;
        }
      }
    }

    .tab-item {
      width: 23%;
      height: 56px;

      border-radius: 8px;
      cursor: pointer;
      background: linear-gradient(0deg, #ea8d13, #f6c01b);

      img {
        width: 24px;
        height: 24px;
        float: left;
        margin: 15px 20px 0px 20px;
      }

      .desc {
        width: 45%;
        float: left;
        margin-top: 8px;

        .desc-top {
          display: block;
          font-size: 14px;
          font-weight: bold;
        }

        .desc-btm {
          font-size: 12px;
        }
      }

      .value {
        float: right;
        margin-right: 20px;
        line-height: 56px;
        font-size: 20px;
        font-weight: bold;
      }
    }

    .finish {
      background: #6e91fb;
    }

    .pending {
      background: #9a9a9c;
    }
  }

  .toolbar {
    width: 100%;
    height: 40px;

    :deep .el-form {
      margin-left: 65px;

      .el-form-item {
        margin-left: 10px;
        float: left;
        margin-bottom: 10px;
      }

      .el-form-item__label {
        color: #656565;
      }
    }

    .btns {
      :deep .el-form-item__content {
        margin-left: 10px !important;
        margin-top: 4px;
      }
    }
  }

  .event-num {
    width: 200px;
    height: 40px;
    color: #656565;
    margin-left: 67px;

    .e-left {
      width: 200px;
      height: 40px;
      overflow: hidden;

      >div {
        float: left;
        margin-left: 20px;
      }

      .total {
        margin-right: 20px;

        .value {
          color: #8f93f7;
        }
      }
    }

    .value {
      font-size: 20px;
      padding: 0px 5px;
      font-weight: bold;
      color: #656565;
    }
  }

  .nodata {
    width: 200px;
    margin: auto;
  }

  .build {
    width: 100%;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    color: #656565;

    .build-l {
      width: 95%;
      height: calc(100vh - 260px);
      border: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 6px;
      background: #ffffff;

      .legend {
        width: 350px;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-around;
        margin-left: 10px;
        float: left;

        .legend-item {
          i {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            border: 1px #bbbbbb solid;
            margin-right: 5px;
          }
        }
      }

      .facadeCheck {
        float: right;
        margin-right: 30px;
      }

      .sketch {
        width: 95%;
        margin: auto;
        height: calc(100vh - 310px);
        overflow-y: auto;
        overflow-x: hidden;

        .sketch-item {
          width: 33%;
          padding: 10px 40px;
          box-sizing: border-box;
          float: left;
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          position: relative;

          .facade {
            position: absolute;
            width: 25px;
            height: 30px;
            left: 15px;
            top: 20px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("@/assets/images/project/facade.png");
            cursor: pointer;
          }

          .s-item-l {
            width: 100px;
            height: 250px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("@/assets/images/project/build.png");
            overflow: hidden;

            .floorInfo {
              width: 67%;
              height: 213px;
              margin: 16px 5px;

              .floor-item {
                width: 100%;
                border-bottom: 1px #bbbbbb solid;
                box-sizing: border-box;
                cursor: pointer;

                span {
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  transform-origin: left top;
                  text-indent: 5px;
                }
              }

              .floor-item:last-child {
                border: none;
              }

              .f-done {
                background: rgba(24, 212, 139, 0.8);
              }

              .f-overdue {
                background: rgba(255, 211, 35, 0.8) !important;
              }

              .f-seriousOverdue {
                background: rgba(245, 120, 97, 0.8) !important;
              }

              .f-unbuilt {
                background: rgba(213, 217, 223, 0.8);
              }
            }
          }

          .s-item-r {
            width: 220px;
            height: 250px;
            border: 1px solid #dce3ef;
            background: #fffffc;
            box-shadow: 2px 2px 4px 0px #eceefc;
            border-radius: 6px;
            padding: 10px 0px;
            box-sizing: border-box;
            line-height: 22px;
            cursor: pointer;

            .name {
              color: #6e91fb;
              font-weight: bold;
              font-size: 16px;
              text-align: center;
              margin-bottom: 20px;
            }

            .label {
              float: left;
              width: 110px;
              text-align: right;
            }

            .value {
              display: inline-block;
              color: #f2ac18;
              padding-right: 5px;
              max-width: 100px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            &.active {
              border: 1px solid #2661c7;
              box-shadow: 1px 1px 6px 0px #2661c7;
            }
          }
        }
      }

      .buildingFacade,
      .buildingProgress {
        .s-item-l {
          background-image: url("@/assets/images/project/builddone.png") !important;
        }
      }
    }

    .build-r {
      width: 23%;
      height: calc(100vh - 250px);
      overflow-y: auto;
      overflow-x: hidden;

      .title {
        width: 200px;
        height: 20px;
        border-left: 3px #8f93f7 solid;
        font-weight: bold;
        padding-left: 10px;
        margin: 20px 30px 10px 30px;
      }

      >div {
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background: #ffffff;
        margin-bottom: 10px;
      }

      .build-r-real {
        width: 100%;
        height: 330px;

        .videobox {
          width: 90%;
          height: 260px;
          position: relative;
          margin: auto;

          video {
            width: 100%;
            height: 100%;
          }

          :deep .webrtc {
            .webRtcPlayerBox {
              height: 260px !important;
            }
          }
        }
      }

      .build-r-pic {
        width: 100%;
        height: 330px;

        .imgbox {
          width: 100%;
          padding: 0px 20px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
